<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px" style="min-height: 100vh; background-color: rgb(22,46,86)">
        <div class="aside-head-info"
             style="width: 200px; height: 80px; align-items: center; justify-items: center; display: flex">
          <span
              style="color: #f9f9f9; display: flex; align-items: center; justify-content: center; width: 200px">欢迎您，食堂管理员</span>
        </div>
        <el-menu style="border: none" :default-active="currentUrl" router background-color="#162E56"
                 text-color="#f9f9f9">
          <el-menu-item index="/restaurant-manager/index">
            <template #title>
              <el-icon>
                <User/>
              </el-icon>
              用户首页
            </template>
          </el-menu-item>
          <el-menu-item index="/restaurant-manager/restaurant-info-maintain">
            <template #title>
              <el-icon>
                <DishDot/>
              </el-icon>
              餐厅信息
            </template>
          </el-menu-item>
          <el-menu-item index="/restaurant-manager/dishes-maintain">
            <template #title>
              <el-icon>
                <Edit/>
              </el-icon>
              菜品维护
            </template>
          </el-menu-item>
          <el-menu-item index="/restaurant-manager/report-reply">
            <template #title>
              <el-icon>
                <Warning/>
              </el-icon>
              投诉回复
            </template>
          </el-menu-item>
          <el-menu-item index="/restaurant-manager/remark-reply">
            <template #title>
              <el-icon>
                <Message/>
              </el-icon>
              评论回复
            </template>
          </el-menu-item>
          <el-menu-item index="/restaurant-manager/recommend-dish-publish">
            <template #title>
              <el-icon>
                <More/>
              </el-icon>
              新品发布
            </template>
          </el-menu-item>
          <el-menu-item index="/restaurant-manager/vote">
            <template #title>
              <el-icon>
                <Collection/>
              </el-icon>
              调查发布
            </template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="box-shadow: 2px 0 6px rgba(0, 21, 41, .36); display: flex; align-items: center; justify-content: space-between">
          <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item v-for="item in route.matched" :to="{path: item.path}">{{item.meta.title}}</el-breadcrumb-item>

          </el-breadcrumb>
          <div class="avatar-container" style="align-items: center; display: flex; justify-content: flex-end">
            <el-dropdown style="display: flex; align-items: center; justify-content: flex-end" placement="bottom">
        <span class="el-dropdown-link"
              style="display: flex; align-items: center;">
          <el-avatar :size="24" :src="avatarSrc" style="margin: 0 5px"/>
          {{ '欢迎您，' + nickname }}
        </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>个人中心</el-dropdown-item>
                  <el-dropdown-item>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {useRoute} from "vue-router";
import {ArrowRight} from "@element-plus/icons-vue";

let route = useRoute();

// 记录当前食堂管理员属于哪个食堂
let diningHall = ref('');

// 记录当前路由
let currentUrl = ref()

// 记录当前登录用户昵称
let nickname = ref('核打击')

// 记录当前登录用户头像，后期应该要大改
let avatarSrc = ref('/src/assets/turkey.svg')

onMounted(() => {
  currentUrl.value = route.path;
  console.log(currentUrl);
  console.log(route)
})
</script>

<style scoped>
.is-active {
  color: #f9f9f9 !important;
  background-color: #47739a;
  border-radius: 20px;
  margin: 0 10px;
}

.el-menu-item {
  margin: 5px 10px !important;
}

.el-menu-item:hover {
  border-radius: 20px;
}
</style>